<template>
  <div class="card-table p-3 bg-white rounded-3 mb-3">
    <table class="table" style=" table-layout: fixed;word-break:break-all;">
      <thead>
        <tr>
          <th scope="col" class="text-black-50 col-2 col-sm-3 col-md-5"><small>用户</small></th>
          <th scope="col" class="text-black-50 col-2"><small>操作</small></th>
          <th scope="col" class="text-black-50 col-3 d-none d-md-table-cell"><small>时间</small></th>
          <th scope="col" class="text-black-50 col-1 col-md-2"><small>详情</small></th>
        </tr>
      </thead>
      <tbody v-if="table.length">
        <tr v-for="(item,index) in table" :key="index">
          <td class="col-5 text-truncate" scope="row"><a href="#" class="text-decoration-none h6 " data-bs-toggle="tooltip" data-bs-placement="top" :title="item.user">{{ item.user }}</a></td>
          <td class="rol-3"><small>{{ item.operation }}</small></td>
          <td class="rol-3 d-none d-md-table-cell"><small>{{ item.date }}</small></td>
          <td class="rol-1"><a href="javascript: void(0);" class="text-decoration-none text-primary" @click="operation(item)"><small>{{ item.detail }}</small></a></td>
        </tr>
      </tbody>
     
    </table>
      <a v-if="table.length" href="#" class="text-center d-block w-100 text-decoration-none align-item-center">
       展示更多
       <img class="ms-2" src="" alt="">
     </a>
     <div v-else class="text-center w-100 mt-3">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: "card-table",
  data() {
    return {
      
    };
  },
  props: {
    table: {
      require: true,
      type: Array
    }
  },
  created() {

  },
  methods: {
    operation(value){
      this.$emit('operation',value)
    }
  }
};
</script>
<style scoped>

</style>